
import { BrowserRouter, useRoutes } from "react-router-dom";
import { lazy, Suspense } from "react"
import AuthUser from "../access/AuthUser";//独享守卫
import GlobalUser from "../access/GlobalUser";//全局守卫
//配置懒加载

const App = lazy(() => import("../layout/app"))
const Login = lazy(() => import("../pages/login"))
const My = lazy(() => import("../pages/my"))
const Home = lazy(() => import("../pages/home"))
const Cate = lazy(() => import("../pages/cate"))
const A = lazy(() => import("../pages/cate_a"))
const B = lazy(() => import("../pages/cate_b"))
const Detail = lazy(() => import("../pages/detail"))

// 配置路由对象
const routes = [

    {
        path: "/", element: <App></App>,
        children: [
            { path: "login", element: <Login /> },
            { path: "home", element: <Home /> },
            { path: "my", element: <AuthUser><My /></AuthUser> },
            {
                path: "cate",  children: [
                    {
                        path: "a", element: <A />,
                        children: [{
                            path: "detail/:id", element: <Detail />
                        }]

                    }, { path: "b", element: <B /> }

                ]
            },]
    }
]


const ConfigRouter = () => {
    const Routes = () => useRoutes(routes)
    return (
        // <>123</>
        <BrowserRouter>
            <GlobalUser>
                <Suspense fallback={<h1>loading...</h1>}>
                    <Routes></Routes>
                </Suspense>
            </GlobalUser>
        </BrowserRouter>
    )
}
export default ConfigRouter;